<template>
    <div>
       <el-dialog
          title="付款申请"
          v-model="dialogVisible"
          width="1200px"
          :close-on-click-modal="false"
       >
          <!-- 付款信息展示区域 -->
          <div class="payment-info">
             <div class="info-row">
                <div class="info-item">
                   <div class="label">订单类型</div>
                   <div class="value">出库单</div>
                </div>
                <div class="info-item">
                   <div class="label">采购单/出库退货单</div>
                   <div class="value">XS2402120001</div>
                </div>
                <div class="info-item">
                   <div class="label">采购/出库退货日期</div>
                   <div class="value">2022-06-02</div>
                </div>
                <div class="info-item">
                   <div class="label">供应商/客户</div>
                   <div class="value">供应商一</div>
                </div>
                <div class="info-item">
                   <div class="label">采购/出库退货负责人</div>
                   <div class="value">刘一</div>
                </div>
                <div class="info-item">
                   <div class="label">总金额（元）</div>
                   <div class="value">4,000.00</div>
                </div>
                <div class="info-item">
                   <div class="label">待付款金额(元)</div>
                   <div class="value">4,000.00</div>
                </div>
             </div>
          </div>
 
          <!-- 付款详细信息 -->
          <div class="payment-details">
             <div style="display: flex; align-items: center">
                <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
                <!-- <div>
                   <h1>付款金额</h1>
                </div> -->
             </div>
             <el-row :gutter="20">
                <el-col :span="12">
                   <el-form-item label="付款金额">
                      <el-input placeholder="请输入" />
                   </el-form-item>
                </el-col>
                <el-col :span="12">
                   <el-form-item label="付款方式">
                      <el-select placeholder="请选择">
                         <el-optin
                            v-for="item in 5"
                            :key="item"
                            :label="item"
                            :value="item"
                         />
                      </el-select>
                   </el-form-item>
                </el-col>
             </el-row>
             <el-row :gutter="20">
                <el-col :span="12">
                   <el-form-item label="付款日期">
                      <el-input placeholder="请输入" />
                   </el-form-item>
                </el-col>
                <el-col :span="12">
                   <el-form-item label="备注">
                      <el-select placeholder="请选择">
                         <el-optin
                            v-for="item in 5"
                            :key="item"
                            :label="item"
                            :value="item"
                         />
                      </el-select>
                   </el-form-item>
                </el-col>
             </el-row>
          </div>
 
          <!-- 附件区域 -->
          <div class="attachments">
             <div style="display: flex; align-items: center; margin-bottom: 10px">
                <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
                <div>
                   <h1>附件</h1>
                </div>
             </div>
             <div class="attachments-list" >
                <div class="upload-box">
                   <el-button
                      ><el-icon><Upload /></el-icon>上传文件</el-button
                   >
                   <p>支持扩展名：.rar.zip.doc.docx.pdf .jpg..文档.docx 单个文件大小在500kb以内</p>
                </div>
                <div class="upload-progress">
 
                </div>
             </div>
          </div>
          <template #footer>
             <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                   type="primary"
                   color="#6860FF"
                   >确定</el-button
                >
             </span>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup>
    import { ref, defineExpose } from "vue";
 
    const dialogVisible = ref(false);
    const approvalOpinion = ref("");
 
    defineExpose({
       open: () => {
          dialogVisible.value = true;
       },
    });
 </script>
 
 <style scoped lang="scss">
    .payment-info {
       background-color: #f4f5f7;
       padding: 20px;
       border-radius: 5px;
       .info-row {
          display: flex;
          justify-content: space-around;
          .info-item {
             //    display: flex;
             .value {
                color: #333;
                font-weight: 500;
             }
          }
       }
    }
 
    .payment-details {
       margin-top: 10px;
    }
    .attachments,
    .approval-opinion {
       margin-bottom: 20px;
       h3 {
          font-size: 16px;
          margin-bottom: 15px;
          font-weight: 500;
       }
    }
 
    .details-content {
       .details-row {
          display: flex;
          gap: 20px;
          margin-bottom: 15px;
          .details-item {
             flex: 1;
             .label {
                color: #666;
                margin-bottom: 8px;
                display: block;
             }
             .value-box {
                background-color: #f5f7fa;
                padding: 8px 12px;
                border-radius: 4px;
             }
          }
       }
    }
 
    .attachments-list {
       display: flex;
       .upload-box {
          flex: 1;
       }
       .upload-progress {
          flex: 1;
       }
    }
 
    .dialog-footer {
       display: flex;
       justify-content: flex-end;
       gap: 10px;
    }
    ::v-deep .el-dialog {
       --el-dialog-padding-primary: 0px;
    }
    ::v-deep .el-dialog__header {
       padding: 10px 16px;
       border-bottom: 1px solid #f0f0f0;
       font-weight: bold;
    }
    ::v-deep .dialog-footer {
       padding: 10px 16px;
       border-top: 1px solid #f0f0f0;
    }
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
       color: #000;
    }
    ::v-deep .el-dialog__body {
       padding: 10px 10px;
    }
    :deep(.el-form-item__label) {
       justify-content: flex-start;
    }
    :deep(.el-form-item) {
       flex-direction: column;
       margin-bottom: 7px;
    }
    :deep(.el-select__wrapper) {
       background: #fafcfb;
    }
    :deep(.el-badge__content.is-fixed) {
       color: #666;
       border-radius: 3px;
       padding: 4px;
    }
    :deep(.el-table .cell) {
       display: flex;
       justify-content: center;
    }
    :deep(.el-button:hover) {
       color: #6860ff;
       background: #f4f5f7;
    }
    :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
       width: 100%;
    }
    :deep(.el-input__wrapper:hover) {
       box-shadow: inset 0 0 0 1px #6860ff;
    }
 </style>
 